<script src="../static/js/jquery-2.2.1.min.js" th:src="@{/js/jquery-2.2.1.min.js}"></script>
<!--<script src="../static/js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>-->
<!--<script src="../static/js/respond.min.js" th:src="@{/js/respond.min.js}"></script>-->
<!--&lt;!&ndash;<script src=screenatic/js/jquery-1.11.1.min.js" th:src="@{/js/jquery-1.11.1.min.js}"></script>&ndash;&gt;-->
<!--<script src="../static/js/jquery-migrate-1.2.1.min.js" th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>-->
<!--<script src="../static/js/jquery-ui-1.10.3.min.js" th:src="@{/js/jquery-ui-1.10.3.min.js}"></script>-->
<!--<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>-->
<!--<script src="../static/js/modernizr.min.js" th:src="@{/js/modernizr.min.js}"></script>-->
<!--<script src="../static/js/jquery.sparkline.min.js" th:src="@{/js/jquery.sparkline.min.js}"></script>-->
<!--<script src="../static/js/toggles.min.js" th:src="@{/js/toggles.min.js}"></script>-->
<!--<script src="../static/js/retina.min.js" th:src="@{/js/retina.min.js}"></script>-->
<!--<script src="../static/js/jquery.cookies.js" th:src="@{/js/jquery.cookies.js}"></script>-->


<link href="../../static/css/jeDate-test.css" rel="stylesheet" th:href="@{/css/jeDate-test.css}"/>
<link href="../../static/css/jedate.css" rel="stylesheet" th:href="@{/css/jedate.css}"/>
<script src="../../static/js/jquery.jedate.js" th:src="@{/js/jquery.jedate.js}"></script>
<script src="../../static/js/jedate-test.js" th:src="@{/js/jedate-test.js}"></script>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游客人数</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-family: 微软雅黑;
    }

    .main {
        width: 100%;
        height: 100%;
        background: url("../images/mainbg.png");
        background-size: 100% 100%;
        position: absolute;
        top: 0;
    }
    .dateborder{
        background: url("../images/dateborder.png");
        width: 395px;
        height: 70px;
        background-size: 100% 100%;
        position: absolute;
        top: 7%;
        left: 2%;
    }
    #time{
        margin-left: 18%;
        font-size: 1.5rem;
        color: #23d4da;
        margin-top: 4%;
    }
    .dayrn{
        width: 200px;
        height: 250px;
        /*border: 1px solid red;*/
        position: absolute;
        right: 14%;
        top: 15%;
    }
    .dasss{
        width: 420px;
        height: 325px;
        /*border: 1px solid red;*/
        position: absolute;
        right: 39%;
        top: 31%;
    }
    .daysj{
        width: 200px;
        height: 250px;
        /*border: 1px solid red;*/
        position: absolute;
        left: 14%;
        bottom: 9%;
    }
    .numbg{
        background: url("../images/numbg.png");
        width: 209px;
        height: 206px;
        line-height: 13rem;
        text-align: center;
        font-size: 2.5rem;
        color: #fff;
        animation:myframes01 4s linear infinite;
    }
    @keyframes myframes01{
        from{transform: rotate(0deg)}
        to{transform: rotate(360deg);}
    }
    .daytitle{
        text-align: center;
        font-size: 1.7rem;
        color: #fff;
    }
    .num {
        top: 29%;
        width: 209px;
        position: absolute;
        text-align: center;
        font-size: 3.2rem;
        color: #ffd81f;
        font-weight: bolder;
        background: none;
        border: none;
        z-index: 11;
    }
</style>
<body>
<div class="main">
    <div class="dateborder">
       <div id="time"></div>
    </div>
    <!--<div class="dasss" onclick="back()">-->
    <!--</div>-->
    <div class="dayrn">
        <input class="num" id="capacity" onBlur="saveNewCapacity(this)"></input>
        <div class="numbg"></div>
        <div class="daytitle">今日容纳客流量</div>
    </div>
    <div class="daysj">
        <span class="num" id="touristVolume"></span>
        <div class="numbg"></div>
        <div class="daytitle">今日实际客流量</div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        setInterval(function(){
            var time=new Date();
            var year=time.getFullYear();  //获取年份
            var month=time.getMonth()+1;  //获取月份
            var day=time.getDate();   //获取日期
            var hour=checkTime(time.getHours());   //获取时
            var minite=checkTime(time.getMinutes());  //获取分
            var second=checkTime(time.getSeconds());  //获取秒
            function checkTime(i){
                if(i<10) return "0"+i;
                return i;
            }
            var box=document.getElementById("time");
            box.innerHTML=year+"年"+month+"月"+day+"日  "+hour+":"+minite+":"+second;
        },1000);
    });
    var int =0;
    $(function () {
        $.get("findOne", function (result) {
                $("#capacity").val(result.dayVisitors.capacity);
                $("#touristVolume").text(result.dayVisitors.touristVolume);
                int =result.dayVisitors.capacity;
            });
        setInterval(function(){
            $.get("findOne", function (result) {
                if(result.dayVisitors.capacity!=int){
                    $("#capacity").val(result.dayVisitors.capacity);
                    int=result.dayVisitors.capacity;
                }
                $("#touristVolume").text(result.dayVisitors.touristVolume);
            });
        },3000);
    });
    function saveNewCapacity(obj) {
        $.get("changCapacity/", {"id": obj.value}, function (result) {
//            int =obj.value;
//            $("#capacity").val(result.dayVisitors.capacity);
//            $("#touristVolume").text(result.dayVisitors.touristVolume);
        });
    }
    function back() {
                    $('html').load(/*[[@{/login}]]*/"./login.html")
    }
</script>
</body>
</html>